<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理页面</title>
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!--<link rel="stylesheet" href="../../../static/plugins/elementui/index.css">-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../../../static/css/orderset.css">
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="tableData.list"
                style="width: 100%">
            <el-table-column
                    label="用户姓名"
                    prop="username">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="gender">
            </el-table-column>
            <el-table-column
                    label="电话"
                    prop="telephone">
            </el-table-column>
            <el-table-column
                    label="账号"
                    prop="account">
            </el-table-column>
            <el-table-column
                    label="生日"
                    prop="birthday">
            </el-table-column>

            <el-table-column
                    label="备注"
                    prop="remark">
            </el-table-column>

            <el-table-column
                    align="right"
                    width="350">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="name"
                            size="mini"
                            placeholder="输入姓名查找"
                            @input="showUser(name)"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="openUser( scope.row)">修改
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteUser(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="tableData.pageNum"
                :page-size="tableData.pageSize"
                :total="tableData.total"
                @current-change="showUser(name,$event)">
        </el-pagination>
        <p>当前为:{{tableData.pageNum}}页,总页数为:{{tableData.pages}},总条数为:{{tableData.total}}</p>
    </template>

    <!--用户编辑-->
    <!--弹出框-->
    <el-dialog title="角色编辑" :visible.sync="dialogFormVisible">
        <template>
            <el-tabs v-model="activeName">
                <el-tab-pane label="用户编辑" name="first">
                    <el-form ref="form" :model="form" label-width="80px">

                        <el-form-item label="账号">
                            <el-input v-model="form.account" :disabled="true"></el-input>
                        </el-form-item>

                        <el-form-item label="用户姓名">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-select v-model="form.gender" placeholder="请选择">
                                <el-option
                                        label="男"
                                        value="男">
                                </el-option>
                                <el-option
                                        label="女"
                                        value="女">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="生日">
                            <el-date-picker
                                    v-model="form.birthday"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="电话">
                            <el-input v-model="form.telephone"></el-input>
                        </el-form-item>

                        <el-form-item label="备注">
                            <el-input v-model="form.remark"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="角色配置" name="second">
                    <table class="datatable">
                        <thead>
                        <tr>
                            <th>选择</th>
                            <th>角色名称</th>
                            <th>角色说明</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="c in roleList">
                            <td>
                                <input :id="c.id" v-model="roles" type="checkbox" :value="c.id">
                            </td>
                            <td><label :for="c.id">{{c.name}}</label></td>
                            <td><label :for="c.id">{{c.description}}</label></td>
                        </tr>
                        </tbody>
                    </table>
                </el-tab-pane>

            </el-tabs>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false,roles=[]">取 消</el-button>
            <el-button type="primary" @click="updateUser(form)">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="../../../static/js/vue.js"></script>
<script src="../../../static/js/axios-0.18.0.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            pageNum: '',
            name: ''
        }, data() {
            return {
                tableData: [],
                pageNum: '',
                name: '',
                dialogFormVisible: false,
                activeName: 'first',
                roles: [],
                roleList: '',
                form: {
                    id: '',
                    username: '',
                    gender: '',
                    birthday: '',
                    telephone: '',
                    account: '',
                    remark: ''
                }
            }
        },
        methods: {
            open2(name) {
                this.$message({
                    showClose: true,
                    message: name,
                    type: 'success'
                });
            }, open3(name) {
                this.$message({
                    showClose: true,
                    message: name,
                    type: 'error'
                });
            }, showUser(name, pageNum) {
                this.pageNum = pageNum;
                axios.get("/user/queryUserAll", {
                    params: {
                        'name': name,
                        'pageNum': pageNum
                    }
                }).then(data => {
                    if (data.data.code == '-998') {
                        this.open3("你无该权限!");
                    } else if (data.data.code == null || data.data.code == '') {
                        this.tableData = data.data;
                    }
                }).catch(e => {
                    alert("错误信息为:" + e)
                });
            }, openUser(row) {
                this.dialogFormVisible = true;
                this.form.id = row.id,
                    this.form.account = row.account;
                this.form.username = row.username;
                this.form.gender = row.gender;
                this.form.remark = row.remark;
                this.form.birthday = row.birthday;
                this.form.telephone = row.telephone;
                axios.get("/user/queryByRle").then(data => {
                    if (data.data.code == '-998') {
                        this.open3("你无该权限!")
                    } else if (data.data.code == null || data.data.code == '') {
                        this.roleList = data.data;
                        axios.get("/user/queryByRoleIds.do?roleID=" + row.id).then(data => {
                            if (data.data.code == '-998') {
                                this.open3("你无该权限!")
                            } else if (data.data.code == null || data.data.code == '') {
                                this.roles = data.data;
                            }
                        });
                    } else {
                        this.open3("显示失败!");
                    }
                });
            }, updateUser(form) {
                console.log(form)
                console.log(this.form)
                axios.post("/user/updateUser.do?roleIds=" + this.roles, form).then(data => {
                    if (data.data.code == '-998') {
                        this.open3("你无该权限!")
                    } else if (data.data) {
                        this.open2("修改成功!")
                    } else {
                        this.open3("修改失败!")
                    }
                    this.roles = [];
                    this.showUser(this.name,this.pageNum);
                    this.dialogFormVisible = false;
                }).catch(e => {
                    alert("错误信息为:" + e);
                    this.roles = [];
                });
            },deleteUser(row){
                this.$confirm('你确定要删除'+row.username+'吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/user/deleteUser/"+row.id).then(data =>{
                        if (data.data.code=='-998'){
                            this.open3("你无该权限!");
                        }else if (data.data){
                            this.open2("删除成功!")
                        }else {
                            this.open3("删除失败!");
                        }
                        this.showUser(this.name,this.pageNum);
                        this.dialogFormVisible=false;
                    }).catch(e =>{
                        alert("错误信息为:"+e);
                    });
                }).catch(e =>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }, created() {
            this.showUser();
        }
    });
</script>
</html>